<template>
  <div>
    <!-- <el-button size="mini" type="text" @click="addRent()">添加合同</el-button> -->
    <el-dialog title="添加合同" :visible="rentDialogVisible" width="580px" @close="closeDialog">
      <!-- 表单区域 -->
      <div class="form-container">
        <el-form ref="addForm" :model="rentForm" :rules="rentRules" label-position="top">
          <el-form-item label="租赁楼宇" prop="buildingId">
            <el-select v-model="rentForm.buildingId" placeholder="请选择" style="width:400px">
              <el-option
                v-for="item in buildingList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="租赁起止日期" prop="rentTime">
            <el-date-picker
              v-model="rentForm.rentTime"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd"
              style="width:400px"
            />
          </el-form-item>
          <el-form-item label="租赁合同" prop="contractId">
            <el-upload action="#" :http-request="handleUpload" :before-upload="beforeUpload">
              <el-button size="small" type="primary" plain>上传合同文件</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.doc .docx .pdf, 文件大小不超过5M</div>
            </el-upload>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <el-button size="mini" @click="closeDialog">取 消</el-button>
        <el-button size="mini" type="primary" @click="confirm">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
//
import { createContract, getCompanyRentalList, uploadAPI } from '@/api/park'

export default {
  props: {
    rentDialogVisible: {
      type: Boolean,
      default: false
    },
    currentId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      buildingList: [], // 楼宇列表
      pId: '',
      rentForm: {
        buildingId: null, // 楼宇id
        contractId: null, // 合同id
        contractUrl: '', // 合同Url
        enterpriseId: null, // 企业名称
        type: 0, // 合同类型
        rentTime: [] // 合同时间
      },
      rentRules: {
        buildingId: [
          { required: true, message: '请选择楼宇', trigger: 'change' }
        ],
        rentTime: [
          { required: true, message: '请选择租赁日期', trigger: 'change' }
        ],
        contractId: [
          { required: true, message: '请上传合同文件' }
        ]
      }
    }
  },
  created() {
    this.getRentList()
  },

  methods: {
    // 确定上传文件
    confirm() {
      this.addRentContract()
    },
    // 获取id
    getID(id) {
      this.pid = id
    },
    // 添加合同
    async addRentContract() {
      const obj = { ...this.rentForm, enterpriseId: this.pid, startTime: this.rentForm.rentTime[0], endTime: this.rentForm.rentTime[1] }
      delete obj.rentTime

      await createContract(obj)
      // console.log(res)
      // 提示用户
      this.$message.suceess({ message: '添加成功' })
    },
    // 文件上传
    async handleUpload(params) {
      //   console.log(file)
      // 图片和文件的上传需要要使用formData对象
      const formData = new FormData()
      formData.append('file', params.file)
      formData.append('type', 'contract')
      console.log(formData)
      // 调用接口
      const res = await uploadAPI(formData)
      //   console.log(res)
      this.rentForm.contractId = res.data.id
      this.rentForm.contractUrl = res.data.url
    },
    // 上传文件前验证
    beforeUpload(file) {
      console.log(file)
      console.log(file.name.split('.'))

      // 判断文件是否符合要求
      // 支持扩展名：.doc .docx .pdf, 文件大小不超过5M
      // split 方法  是将字符串分割成数组
      const isExpend = ['doc', 'docx', 'pdf'].includes(file.name.split('.')[1])
      // 判断文件的大小是否超过5M
      const isLt5M = file.size / 1024 / 1024 < 5
      if (!isExpend) {
        this.$message.error('仅支持扩展名：.doc .docx .pdf, 文件!')
      }
      if (!isLt5M) {
        this.$message.error('上传图片大小不能超过5M!')
      }
      return isExpend && isLt5M
    },
    // 获取企业租赁信息列表
    async getRentList() {
      //   console.log('this.currentId', id)
      const { data } = await getCompanyRentalList()
      console.log(data)
      this.buildingList = data
    },
    // 关闭
    closeDialog() {
      this.$emit('update:rentDialogVisible', false)
    }
  }
}
</script>

<style lang="scss" scoped>
.form-container {
    padding: 20px;
}
</style>
